<template>
  <div>
    <el-table :data="orders.ordersList" style="width: 100%" :default-sort="{ prop: 'id', order: 'ascending' }" border>
      <el-table-column prop="order_id" label="订单ID" min-width="130" sortable fixed />
      <el-table-column prop="order_number" label="订单编号" min-width="260" sortable />
      <el-table-column prop="order_price" label="订单价格" min-width="130" sortable>
        <template v-slot="scope">
          ¥ {{ scope.row.order_price }}
        </template>
      </el-table-column>
      <el-table-column prop="pay_status" label="支付状态" min-width="130" sortable>
        <template v-slot="scope">
          <el-tag type="danger" v-if="scope.row.pay_status == 0">未支付</el-tag>
          <el-tag type="success" v-else>已支付</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="order_pay" label="支付方式" min-width="130" sortable>
        <template v-slot="scope">
          <div v-show="scope.row.order_pay == 0" class="flex">
            <img src="@/assets/img/未支付.png" alt="" class="pay">
            <span>未支付</span>
          </div>
          <div v-show="scope.row.order_pay == 1" class="flex">
            <img src="@/assets/img/支付宝.png" alt="" class="pay">
            <span>支付宝</span>
          </div>
          <div v-show="scope.row.order_pay == 2" class="flex">
            <img src="@/assets/img/微信.png" alt="" class="pay">
            <span>微信</span>
          </div>
          <div v-show="scope.row.order_pay == 3" class="flex">
            <img src="@/assets/img/银行卡.png" alt="" class="pay">
            <span>银行卡</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="is_send" label="是否发货" min-width="130" sortable />
      <el-table-column prop="create_time" label="物流详情" min-width="130">
        <template v-slot="scope">
          <el-button type="primary" size="small" plain @click="kuaidiClik(scope.row)">点击查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="下单时间" min-width="200" sortable>
        <template v-slot="scope">
          {{ formatDate(scope.row.create_time, "yyyy-mm-dd HH:MM:ss") }}
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="130" fixed="right">
        <template v-slot="scope">
          <el-button type="primary" icon="EditPen" size="small" @click="editOrders(scope.row)">
            修改订单
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination v-model:currentPage="orders.ordersListParams.pagenum"
      v-model:page-size="orders.ordersListParams.pagesize" :page-sizes="[1, 5, 10, 20, 30, 50]" :small="false"
      :disabled="false" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="orders.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    <!--物流信息 dialog 框 -->
    <el-dialog v-model="orders.kuaiDiDialog" title="物流信息" width="50%">
      <!-- 时间线 -->
      <el-timeline>
        <el-timeline-item v-for="(item, index) in orders.kuaiDi" :key="index" :timestamp="item.time" placement="top"
          type="primary" :hollow="true">
          <el-card>{{ item.context }}</el-card>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>

    <!-- 修改订单 dialog 框 -->
    <el-dialog v-model="orders.editDialog" title="修改订单" width="50%">
      <!-- 表单 -->
      <el-form ref="editFormRef" :model="orders.orderDetail" label-position="top" :rules="editFormRules">
        <el-form-item label="订单ID">
          <el-input v-model="orders.orderDetail.order_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="订单价格" prop="order_price">
          <el-input v-model="orders.orderDetail.order_price"></el-input>
        </el-form-item>
        <el-form-item label="是否发货" prop="is_send">
          <el-radio-group v-model="orders.orderDetail.is_send">
            <el-radio label="否" border>未发货</el-radio>
            <el-radio label="是" border>已发货</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否付款" prop="is_send">
          <el-radio-group v-model="orders.orderDetail.pay_status">
            <el-radio label="0" border>未付款</el-radio>
            <el-radio label="1" border>已付款</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <template #footer>
        <span slot="footer" class="dialog-footer">
          <el-button @click="orders.editDialog = false">取 消</el-button>
          <el-button type="primary" @click="editClick">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import useStore from '@/pinia/index.js';
import cityData from "@/utils/cityData.js";// 城市数据
import { formatDate } from '@/utils/dataFormat.js'; // 时间格式化
import { ref, reactive } from "vue"
const { orders } = useStore();
// 表单对象
const editFormRef = ref()
// 表单验证规则
const editFormRules = reactive({
  is_send: [
    { required: true, message: "请输入是否发货", trigger: "blur" },
    { min: 0, max: 1, message: "发货状态异常", trigger: "blur" }
  ],
  pay_status: [
    { required: true, message: "请输入是否付款", trigger: "blur" },
    { min: 0, max: 1, message: "付款状态异常", trigger: "blur" }
  ],
  order_price: [
    { required: true, message: "请输入订单价格", trigger: "blur" }
  ],
})
// 获取订单数据
orders.REQUEST_ordersList()
// 当前显示的条数
const handleSizeChange = () => {
  orders.REQUEST_ordersList();
}
// 当前显示的页码
const handleCurrentChange = () => {
  orders.REQUEST_ordersList();
}
// 点击修改订单
const editOrders = (row) => {
  orders.REQUEST_ordersDetail(row.order_id);// 获取订单详情
  orders.editDialog = true;
}
// 点击确定修改订单
const editClick = () => {
  editFormRef.value.validate((valid) => {
    if (valid) {
      console.log(orders.orderDetail.consignee_addr);
      orders.REQUEST_editOrder();// 修改订单
    } else {
      return false
    }
  })
}
// 点击查看物流
const kuaidiClik = async (row) => {
  orders.REQUEST_kuaiDi(row.order_id)// 请求物流信息mockjs已拦截
  orders.kuaiDiDialog = true;
}
</script>

<style lang="less" scoped>
.el-pagination {
  margin-top: 20px;
}

.el-cascader {
  width: 100% !important;
}

.pay {
  width: 30px;
  height: 30px;
  margin-right: 12px;
}

.flex {
  display: flex;
  align-items: center;
}

.dialog-footer {
  button:first-child {
    margin-right: 12px;
  }
}
</style>